<template>
  <div>
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="15">
            <el-button type="primary" @click="newteacher">新增教师</el-button>
          </el-col>
          <el-col :span="3">
            <el-select v-model="search_type" placeholder="搜索字段">
              <el-option label="ID" value="0"></el-option>
              <el-option label="名称" value="1"></el-option>
              <el-option label="分类" value="2"></el-option>
              <el-option label="学历" value="3"></el-option>
              <el-option label="信息" value="4"></el-option>
              <el-option label="用户" value="5"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="searchteacher" class="input-with-select" @input ="teacherchange">
              <el-button @click="mysearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <br>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <!--<el-table-column type="index" width="40"></el-table-column>-->
          <el-table-column prop="id" label="ID" width="100" ></el-table-column>
          <el-table-column prop="name" label="名称" width="110" ></el-table-column>
          <el-table-column prop="subject.name" label="课题分类" width="100" ></el-table-column>
          <el-table-column prop="education" label="学历" width="100" ></el-table-column>
          <el-table-column prop="honor" label="资历" width="100" ></el-table-column>
          <el-table-column prop="info" label="个人信息"></el-table-column>
          <el-table-column prop="status" label="账号状态" width="100" ></el-table-column>
          <el-table-column prop="user.realname" label="所属用户">
            <template scope="scope">
              <p>{{scope.row.user.id}}/{{scope.row.user.realname}}/{{scope.row.user.nickname}}/{{scope.row.user.phone}}/{{scope.row.user.email}}</p>
            </template>
          </el-table-column>
          <!--<el-table-column prop="image_url" label="头像" width="80" ></el-table-column>-->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="editorteacher(scope.row)" type="text" size="small">编辑</el-button>
              
              <template v-if="roles === 'superadmin' ">
                <el-button @click="deleteteacher(scope.row)" type="text" size="small">删除</el-button>
              </template>
              <template v-else>
                <el-button @click="deleteteacher(scope.row)" type="text" size="small" disabled>删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <el-row>
          <el-col :span="8"><p></p></el-col>
          <el-col :span="8">
            <el-pagination
              @current-change="currentChange"
              @size-change="sizeChange"
              background
              :page-sizes="[20, 40, 60, 100]"
              layout="sizes, prev, pager, next"
              :total="total"
              :page-size="page_size"
              :current-page="current_page"
            >
            </el-pagination>
          </el-col>
          <el-col :span="8"><p></p></el-col>
        </el-row>

        <el-dialog title="编辑教师信息" :visible.sync="dialogFormVisible" width="40%" @close="dialogcolse" center>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" :label-position="labelPosition">
            <el-form-item label="名称" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入教师名称"></el-input>
            </el-form-item>
            <el-form-item label="选择用户" prop="user">
              <el-select v-model="ruleForm.user" placeholder="请选择" style="width: 100%;">
                <el-input placeholder="搜索用户" v-model="searchuser" class="input-with-select" @input ="searchange">
                  <el-button @click="searchusermethod" slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <el-option
                  v-for="item in ruleForm.users"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择课题分类" prop="subject">
              <el-select v-model="ruleForm.subject" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in ruleForm.subjects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择教师学历" prop="education" >
              <el-select v-model="ruleForm.education" placeholder="请选择" style="width: 100%;">
                <el-option label="暂无/Null" value="暂无/Null"></el-option>
                <el-option label="博士/Doctor" value="博士/Doctor"></el-option>
                <el-option label="硕士/Master" value="硕士/Master"></el-option>
                <el-option label="学士/Bachelor" value="学士/Bachelor"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择教师资历" prop="honor">
              <el-select v-model="ruleForm.honor" placeholder="请选择" style="width: 100%;">
                <el-option label="暂无/Null" value="0"></el-option>
                <el-option label="高级教师/Advanced teacher" value="1"></el-option>
                <el-option label="首席教师/Chief teacher" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择教师账号状态" prop="status">
              <el-select v-model="ruleForm.status" placeholder="请选择" style="width: 100%;">
                <el-option label="可用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="教师信息" prop="info">
              <el-input v-model="ruleForm.info" placeholder="请输入教师信息"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </el-dialog>


      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<script>
  import store from '../../store'
  import { getcategory, getteacher, postteacher, deleteteacher, patchteacher, getuser } from '@/api/course'
  export default {
    name: 'teachermanager',
    data() {
      return {
        roles: store.getters.roles[0],
        tableData: [],
        dialogFormVisible: false,
        labelPosition: 'left',
        use: 0,
        ruleForm: {
          id: 0,
          name: '',
          education: '暂无/Null',
          honor: '0',
          status: '1',
          info: '',
          subjects: [],
          subject: '',
          users: [],
          user: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入教师名称', trigger: 'blur' }
          ],
          education: [
            { required: true, message: '请选择教师学历', trigger: 'change' }
          ],
          honor: [
            { required: true, message: '请选择教师资历', trigger: 'change' }
          ],
          status: [
            { required: true, message: '请选择教师账号状态', trigger: 'change' }
          ],
          info: [
            { required: true, message: '请输入教师个人信息', trigger: 'blur' }
          ],
          subject: [
            { required: true, message: '请选择教师课题', trigger: 'change' }
          ],
          user: [
            { required: true, message: '请选择用户信息', trigger: 'change' }
          ]
        },
        searchteacher: '',
        page_size: 20,
        total: 0,
        current_page: 1,
        searchuser: '',
        search_type: '0'
      }
    },
    methods: {
      getteacherinfo(page, keyword, page_size, search_type) {
        getteacher(page, keyword, page_size, search_type).then(response => {
          const data = response.data
          for (var key in data) {
            if (data[key].honor === 1) {
              data[key].honor = '高级教师'
            } else {
              data[key].honor = '首席教师'
            }
            if (data[key].status === 1) {
              data[key].status = '可用'
            } else {
              data[key].status = '停用'
            }
          }
          this.tableData = data
          this.total = response.data_count
        }).catch(error => {
          console.log(error)
        })
      },
      getuserinfo(page, keyword, page_size) {
        getuser(page, keyword, page_size).then(response => {
          const data = response.data
          // var new_data_list = []
          // console.log(data.length)
          if (data.length === 0) {
            var nal_data_list = []
            var nal_data = {}
            nal_data.value = 0
            nal_data.label = '没有搜索到数据！'
            nal_data_list.push(nal_data)
            this.ruleForm.users = nal_data_list
          } else {
            var new_data_list = []
            for (var key in data) {
              var new_data = {}
              new_data.value = data[key].id
              new_data.label = data[key].id + '/' + data[key].realname + '/' + data[key].nickname + '/' + data[key].phone + '/' + data[key].email
              new_data_list.push(new_data)
            }
            this.ruleForm.users = new_data_list
          }
        }).catch(error => {
          console.log(error)
        })
      },
      getcategoryinfo(page, keyword, page_size) {
        getcategory(page, keyword, page_size).then(response => {
          const data = response.data
          var new_data_list = []
          for (var key in data) {
            var new_data = {}
            new_data.value = data[key].id
            new_data.label = data[key].name
            new_data_list.push(new_data)
          }
          this.ruleForm.subjects = new_data_list
        }).catch(error => {
          console.log(error)
        })
      },
      clearFormdata(){
          this.ruleForm = {
            id: 0,
            name: '',
            education: '暂无/Null',
            honor: '0',
            status: '1',
            info: '',
            subjects: [],
            subject: '',
            users: [],
            user: ''
        }
      },
      dialogcolse() {
        // 对话框关闭的回调
        // this.$refs['ruleForm'].resetFields()
        this.clearFormdata()
      },
      newteacher() {
        this.getcategoryinfo(1, '', 20)
        this.getuserinfo(1, '', 20)
        this.use = 0
        this.dialogFormVisible = true
      },
      editorteacher(row) {
        this.getcategoryinfo(1, '', 20)
        this.getuserinfo(1, '', 20)
        var new_data = {}
        new_data.value = row.user.id
        new_data.label = row.user.id + '/' + row.user.realname + '/' + row.user.nickname
        this.ruleForm.users.push(new_data)
        this.use = 1
        this.ruleForm.subject = row.subject.id
        this.ruleForm.user = row.user.id
        this.ruleForm.education = row.education
        this.ruleForm.info = row.info
        this.ruleForm.name = row.name
        this.ruleForm.id = row.id
        if (row.status === '可用') {
          this.ruleForm.status = '1'
        } else {
          this.ruleForm.status = '0'
        }
        if (row.honor === '高级教师') {
          this.ruleForm.honor = '1'
        } else {
          this.ruleForm.honor = '2'
        }
        this.dialogFormVisible = true
      },
      mysearch() {
        this.current_page = 1
        this.getteacherinfo(this.current_page, this.searchteacher, this.page_size, this.search_type)
      },
      teacherchange() {
        this.current_page = 1
        this.getteacherinfo(this.current_page, this.searchteacher, this.page_size, this.search_type)
      },
      searchusermethod() {
        this.getuserinfo(1, this.searchuser)
      },
      searchange(val) {
        // console.log(val)
        // console.log(this.searchuser)
        this.getuserinfo(1, this.searchuser)
      },
      currentChange(val) {
        this.current_page = val
        this.getteacherinfo(this.current_page, this.searchteacher, this.page_size)
      },
      sizeChange(val) {
        console.log(val)
        var page_count = this.total / val
        var max_pae = Math.ceil(page_count)
        this.page_size = val
        if (this.current_page <= max_pae) {
          this.getteacherinfo(this.current_page, this.searchteacher, this.page_size)
        } else {
          this.getteacherinfo(max_pae, this.searchteacher, this.page_size)
        }
      },
      deleteteacher(row) {
        this.$confirm('是否确认删除该教师, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          var id = row.id
          deleteteacher(id).then(response => {
            const data = response.data
            console.log(data)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            var data_len = this.tableData.length
            var is_jump = false
            if (data_len === 1) {
              is_jump = true
            } else {
              is_jump = false
            }
            if (this.current_page === 1) {
              this.getteacherinfo(this.current_page, '', this.page_size)
            } else {
              if (is_jump) {
                this.getteacherinfo(this.current_page - 1, '', this.page_size)
              } else {
                this.getteacherinfo(this.current_page, '', this.page_size)
              }
            }
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.subject_id = this.ruleForm.subject
            this.ruleForm.user_id = this.ruleForm.user
            this.ruleForm.status = parseInt(this.ruleForm.status)
            this.ruleForm.honor = parseInt(this.ruleForm.honor)
            if (this.use === 1) {
              patchteacher(this.ruleForm).then(response => {
                const data = response.data
                console.log(data)
                this.dialogFormVisible = false
                this.$message({
                  message: '修改教师成功！',
                  type: 'success'
                })
                this.getteacherinfo(this.current_page, '', this.page_size)
              }).catch(error => {
                console.log(error)
              })
            } else {
              postteacher(this.ruleForm).then(response => {
                const data = response.data
                console.log(data)
                this.dialogFormVisible = false
                this.$message({
                  message: '新增教师成功！',
                  type: 'success'
                })
                this.getteacherinfo(this.current_page, '', this.page_size)
              }).catch(error => {
                console.log(error)
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
        this.dialogFormVisible = false
        this.clearFormdata()
      }
    },
    created: function() {
      this.getteacherinfo(this.current_page, '', this.page_size)
      // this.getcategoryinfo(1, '', 20)
      // this.getuserinfo(1, '', 20)
    }
  }
</script>

<style scoped>

</style>
